Step4 : API integration

  • STEPS

    1. define state

    
                            state = {
                                todos: []
                            }
                        

    2. appi call using axios and set state

    
                            axios
                                .get("https://jsonplaceholder.typicode.com/todos?_page=1&_limit=10")
                            .then(response => {
                                this.setState({ todos: response.data });
                            })
                            .catch(function(error) {
                                console.log(error);
                            });
                            
                        
    Complete code
    
    
                        <div id="react-app"></div> 
          <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
          <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> 
          <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> 
          <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
          <script type="text/babel">
            class ExpenseEntryItem extends React.Component {
                state = {
                    todos: []
                }
                componentDidMount() {
                    this.getTodos();
                }
    
                async getTodos() {
                   
                    // let todos = await axios.get(
                    // "https://jsonplaceholder.typicode.com/todos?_page=1&_limit=10"
                    // );
                    // console.log(todos.data);
    
    
                    axios
                    .get("https://jsonplaceholder.typicode.com/todos?_page=1&_limit=10")
                    .then(response => {
                        this.setState({ todos: response.data });
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
    
    
                }
    
    
    
    
    
    
               render() {
                    
                  return (
                    <ul>
                        {
                        this.state.todos
                            .map(person =>
                            <li key={person.id}>{person.title}</li>
                            )
                        }
                    </ul>
                  );
               }
            }
    
    
            ReactDOM.render(
               <ExpenseEntryItem />,
               document.getElementById('react-app') );
         </script>
    
    
            
  • POST METHOD
    
    
                            export default class PersonAdd extends React.Component {
                            state = {
                                name: ''
                            }
    
                            handleChange = event => {
                                this.setState({ name: event.target.value });
                            }
    
                            handleSubmit = event => {
                                event.preventDefault();
    
                                const user = {
                                name: this.state.name
                                };
    
                                axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
                                .then(res => {
                                    console.log(res);
                                    console.log(res.data);
                                })
                            }
    
                            render() {
                                return (
                                <div>
                                    <form onSubmit={this.handleSubmit}>
                                    <label>
                                        Person Name:
                                        <input type="text" name="name" onChange={this.handleChange} />
                                    </label>
                                    <button type="submit">Add</button>
                                    </form>
                                </div>
                                )
                            }
                            }